<template>
	<div class="page">
		<head-page title="个人信息" id="backstyle"></head-page>
		<div class="head flex aic">
			<van-uploader
				class="avatar"
				v-model="avatar"
				:after-read="afterRead"
				:before-read="beforeRead"
				:max-count="1"
				accept="image/*"
				v-if="uploadShow"
			/>
			<div class="userPic rel" v-else>
				<div class="close-icon fcc" @click="delImg">
					<van-icon name="cross" color="#fff" size="0.1rem" />
				</div>
				<van-image
					@click="preview"
					round
					width="0.8rem"
					height="0.8rem"
					:src="userinfo.userPic"
				/>
			</div>
			<div
				class="m-l-30 bold-700"
				@click="editUserShow('用户名称', 'userName')"
			>
				{{ userinfo.userName }}
			</div>
		</div>
		<van-cell-group class="m-t-20">
			<van-cell title="手机号码" :value="userinfo.userTel" />
			<van-cell
				title="用户微信"
				:value="userinfo.userWeChat"
				@click="editUserShow('用户微信', 'userWeChat')"
			/>
			<van-cell
				title="用户地址"
				:value="userinfo.userAddress"
				@click="editUserShow('用户地址', 'userAddress')"
			/>
		</van-cell-group>
		<div class="footer">
			<van-button
				size="small"
				class="width-max m-t-10"
				plain
				round
				type="info"
				@click="editPwd"
				>修改密码</van-button
			>
			<van-button
				size="small"
				class="width-max m-t-10"
				plain
				round
				type="danger"
				@click="loginOut"
				>退出登录</van-button
			>
		</div>
		<van-dialog
			v-model="editShow"
			:title="'修改' + title"
			show-cancel-button
			@confirm="editSubmit"
			@closed="cancelEdit"
		>
			<van-field
				v-model="editValue"
				:label="title"
				:placeholder="'请输入' + title"
			/>
		</van-dialog>
	</div>
</template>

<script>
import { getUserInfo, editUser, loginOut } from "@/api/user"
import { fileUpload } from "@/api/common"
import { Cell, CellGroup, Dialog, ImagePreview } from "vant"
export default {
	data() {
		return {
			avatar: [],
			uploadShow: false,
			userinfo: {},
			editShow: false,
			title: '',
			editKey: '',
			editValue: ''
		}
	},
	components: { Cell, CellGroup },
	mounted() {
		this.initData()

	},
	methods: {
		// 初始化数据
		initData() {
			getUserInfo({
				userId: sessionStorage.getItem('userId')
			}).then(res => {
				if (res.data.code == 200) {
					this.userinfo = Object.assign({}, this.userinfo, res.data.data)
					if (this.userinfo.userPic) {
						this.userinfo.userPic = this.imgurl + res.data.data.userPic
						this.uploadShow = false
					}
				}
			})
		},
		// 预览
		preview() {
			ImagePreview({
				images: [this.userinfo.userPic],
				// showIndex: true,
				loop: false,
				// startPosition: index
			})
		},
		// 头像修改
		afterRead(file) {
			let formData = new FormData()
			formData.append("file", file.file)
			fileUpload(formData).then(res => {
				if (res.data.code == 200) {
					this.editKey = 'userPic'
					this.editValue = res.data.data
					this.editSubmit()
				}
			})
		},
		beforeRead(file) {
			if (!['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) {
				this.$toast('请上传 jpg/png/jpeg 格式图片')
				return false
			}
			let fileSize = file.size / 1024 / 1024 <= 5
			if (!fileSize) {
				this.$toast('图片大小5M以内')
				return false
			}
			return true
		},
		// 
		delImg() {
			this.uploadShow = true
		},
		// 打开编辑弹窗
		editUserShow(name, key) {
			this.title = name
			this.editKey = key
			this.editValue = this.userinfo[key]
			this.editShow = true
		},
		// 取消
		cancelEdit() {
			this.title = ''
			this.editKey = ''
			this.editValue = ''
			this.editShow = false
		},
		// 提交编辑
		editSubmit() {
			editUser({
				userId: sessionStorage.getItem('userId'),
				[this.editKey]: this.editValue
			}).then(res => {
				if (res.data.code == 200) {
					this.$toast.success('修改成功')
					this.initData()
				}
			})
		},
		// 修改密码
		editPwd() {
			this.$router.push({
				name: 'resetpassword'
			})
		},
		// 退出登录
		loginOut() {
			Dialog.confirm({
				title: "提示",
				message: "确定退出登录吗？",
			}).then(() => {
				loginOut({
					loginOut: sessionStorage.getItem('uid'),
				}).then(res => {
					if (res.data.code == 200) {
						this.$toast.success('退出成功')
						sessionStorage.removeItem('userId')
						sessionStorage.removeItem('token')
						sessionStorage.removeItem('userTel')
						this.$router.replace('/login')
					}
				})

			}).catch(() => {
				// on cancel
			})
		}
	}
}
</script>

<style scoped>
.head {
	padding: 0.2rem;
}
.userPic {
	width: 0.88rem;
	height: 0.88rem;
	overflow: hidden;
}
.close-icon {
	width: 0.14rem;
	height: 0.14rem;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 6;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 0 0 0 0.12rem;
}
::v-deep.avatar .van-uploader__wrapper .van-uploader__upload {
	border-radius: 50%;
	overflow: hidden;
}
::v-deep.avatar .van-uploader__wrapper .van-uploader__preview-image {
	border-radius: 50%;
}
.footer {
	padding: 0 0.2rem;
}
</style>